<template>
 <el-table :data="tableData" style="width: 100%">
		<!-- <el-table-column prop="roomName" label="房号" /> -->
		<el-table-column prop="textId" label="id" />
		<el-table-column prop="content" label="内容" />
		<el-table-column prop="time" label="时间" />
		<el-table-column fixed="right" label="" width="120">
		</el-table-column>
	</el-table>
	<!-- 分页 -->
	<el-pagination @update:current-page="updateCurrentPage" @update:page-size="updatePageSize"
		layout="sizes, prev, pager, next, jumper" :page-size="pageSize" :page-count="pageCount"
		:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :hide-on-single-page="false" />


  <div class="demo-rate-block">
    <span class="demonstration">您入住体验如何？</span>
    <el-rate v-model="value2" :colors="colors" allow-half />
  </div>

</template>
  
  







<script lang="ts" setup>
import type { BoardType } from '@/types';
import { ref, reactive, onMounted } from 'vue'
import { getContentListPage } from '@/api/index'

const value1 = ref(null)
const value2 = ref(null)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }

const tableData = ref<BoardType[]>([])
const pageSize = ref(10)
const pageCount = ref(1)
const currentPage = ref(1)
//获取到当前页面的改动，使之成为新值
const updateCurrentPage = (val: number) => {
  currentPage.value = val
  getList()
}
//获取到当前页面大小的改动，使之成为新值
const updatePageSize = (val: number) => {
  pageSize.value = val
  getList()
}
//对话框可见性
const dialogVisble = ref(false)
//form表单是一个usertype的user
const form = ref<BoardType>({})




const getList = () => {
  //获取留言板列表
  getContentListPage(currentPage.value, pageSize.value).then(((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data.records
      pageCount.value = res.data.pages
      console.log(res)
    }
  }))
}
onMounted(() => {
  getList()
})
</script>
  





<style scoped>
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
  